<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style scoped>
        body {
            background: #f0f2f5;
        }

        #app{
             width: 600px;
             margin: 0 auto; /* 水平居中 */
             margin-top: 150px;
            text-align: center;
        }
        .el-form {
            width: 500px; /* 设置你想要的宽度 */
        }
    </style>
</head>
<body>
<div id="app">
    <h1>用户登录</h1>
    <template>
        <el-form :model="userForm" label-width="100px" class="demo-ruleForm" label-width="80px">
            <el-form-item label="用户名:">
                <el-input v-model="userForm.userName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码:">
                <el-input v-model="userForm.password" placeholder="请输入密码" type="password"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
                <el-button @click="resetForm('queryForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </template>
</div>
</body>
<script>

    new Vue({
        el: '#app',
        methods: {

            onSubmit() {
                //第一步 绑定
                axios({
                    url: '/brand-case/user/login',
                    method: 'POST',
                    data: this.userForm
                }).then(
                    (resp) => {


                        if (resp.data == "OK") {
                            //登录成功跳转
                            window.location.href = "/brand-case/brandList.html";
                        } else {

                            this.resetForm()
                            this.$message(
                                {
                                    message: '用户名密码错误',
                                    type: 'error'
                                })
                        }
                    }
                )
            },
            // 重置页面数据模型
            resetForm() {

                this.userForm = {}

            },


        },
        data() {
            return {

                //用户数据模型定义
                userForm: {
                    userName: "",
                    password: ""
                }
            }
        }
    })

</script>
</html>